{% extends 'base.html' %}

{% block content %}
<div class="mt-4">
    <h2 class="mb-4">任务列表</h2>
    <a href="{% url 'task_create' %}" class="btn btn-primary mb-3">创建新任务</a>
    <div class="table-responsive">
        <table class="table table-striped table-hover">
            <thead class="table-dark">
                <tr>
                    <th style="width: 100px">任务类型</th>
                    <th style="width: 100px">任务 ID</th>
                    <th style="width: 150px">任务标题</th>
                    <th style="width: 100px">负责人</th>
                    <th style="width: 80px">状态</th>
                    <th style="width: 100px">高亮</th>
                    <th style="width: 150px">开发备注</th>
                    <th style="width: 150px">下一步行动</th>
                    <th style="width: 120px">操作</th>
                </tr>
            </thead>
            <tbody>
                {% for task in tasks %}
                <tr>
                    <td>{{ task.task_type }}</td>
                    <td><a href="#" data-bs-toggle="modal" data-bs-target="#taskLogModal-{{ task.pk }}">{{ task.task_id }}</a></td>
                    <td>{{ task.task_title }}</td>
                    <td>{{ task.assignee }}</td>
                    <td>{{ task.status }}</td>
                    <td>{{ task.highlight }}</td>
                    <td>{{ task.dev_comment }}</td>
                    <td>{{ task.next_action }}</td>
                    <td>
                        <a href="{% url 'task_update' task.pk %}" class="btn btn-sm btn-warning">编辑</a>
                        <a href="{% url 'task_delete' task.pk %}" class="btn btn-sm btn-danger">删除</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
    <!-- 任务日志弹窗 -->
    {% for task in tasks %}
    <div class="modal fade" id="taskLogModal-{{ task.pk }}" tabindex="-1" aria-labelledby="taskLogModalLabel-{{ task.pk }}" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="taskLogModalLabel-{{ task.pk }}">任务 {{ task.task_id }} - {{ task.task_title }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 任务详情 -->
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <!-- 可通过 .task-th-container th 选择器统一修改任务详情表头样式 -->
                            <tbody class="task-th-container">
                                <tr>
                                    <th>任务类型</th>
                                    <td>{{ task.task_type }}</td>
                                </tr>
                                <tr>
                                    <th>负责人</th>
                                    <td>{{ task.assignee }}</td>
                                </tr>
                                <tr>
                                    <th>状态</th>
                                    <td>{{ task.status }}</td>
                                </tr>
                                <tr>
                                    <th>高亮</th>
                                    <td>{{ task.highlight }}</td>
                                </tr>
                                <tr>
                                    <th>开发备注</th>
                                    <td>{{ task.dev_comment }}</td>
                                </tr>
                                <tr>
                                    <th>下一步行动</th>
                                    <td>{{ task.next_action }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- 处理日志 -->
                    <h6 class="mb-3">处理日志</h6>
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="table-dark">
                                <tr>
                                    <th>日期</th>
                                    <th>时间</th>
                                    <th>内容</th>
                                    <th>下一步行动</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for log in task.logs.all %}
                                <tr>
                                    <td>{{ log.date }}</td>
                                    <td>{{ log.time }}</td>
                                    <td>{{ log.content }}</td>
                                    <td>{{ log.next_action }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
{% endblock %}